<template>
  <div class="profile-page">
    <div class="page-header">
      <div class="header-content">
        <h2 class="page-title">
          <el-icon class="title-icon">
            <User/>
          </el-icon>
          个人信息
        </h2>
        <p class="page-subtitle">管理您的个人资料和账户设置</p>
      </div>
    </div>

    <div class="profile-content">
      <el-row :gutter="24">
        <!-- 个人信息卡片 -->
        <el-col :span="16">
          <el-card title="基本信息">
            <template #header>
              <div class="card-header">
                <span>基本信息</span>
                <el-button
                    size="small"
                    type="primary"
                    @click="editDialogVisible = true"
                >
                  编辑
                </el-button>
              </div>
            </template>

            <div class="profile-info">
              <div class="info-item">
                <span class="label">用户名：</span>
                <span class="value">{{ userInfo.username }}</span>
              </div>
              <div class="info-item">
                <span class="label">昵称：</span>
                <span class="value">{{ userInfo.nickname || '未设置' }}</span>
              </div>
              <div class="info-item">
                <span class="label">邮箱：</span>
                <span class="value">{{ userInfo.email || '未设置' }}</span>
              </div>
              <div class="info-item">
                <span class="label">手机号：</span>
                <span class="value">{{ userInfo.phone || '未设置' }}</span>
              </div>
              <div class="info-item">
                <span class="label">性别：</span>
                <span class="value">{{ getGenderText(userInfo.gender) }}</span>
              </div>
              <div class="info-item">
                <span class="label">生日：</span>
                <span class="value">{{ userInfo.birthday || '未设置' }}</span>
              </div>
              <div class="info-item">
                <span class="label">注册时间：</span>
                <span class="value">{{ formatDateTime(userInfo.createTime) }}</span>
              </div>
              <div class="info-item">
                <span class="label">最后登录：</span>
                <span class="value">{{ formatDateTime(userInfo.lastLoginTime) }}</span>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 头像和操作 -->
        <el-col :span="8">
          <el-card title="头像">
            <div class="avatar-section">
              <div class="avatar-container">
                <img
                    :src="userInfo.avatar || '/default-avatar.png'"
                    alt="头像"
                    class="avatar"
                />
              </div>
              <div class="avatar-actions">
                <el-button
                    size="small"
                    type="primary"
                    @click="editDialogVisible = true"
                >
                  更换头像
                </el-button>
              </div>
            </div>
          </el-card>

          <el-card style="margin-top: 16px;" title="账户安全">
            <div class="security-actions">
              <el-button
                  type="warning"
                  @click="passwordDialogVisible = true"
              >
                修改密码
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 编辑个人信息对话框 -->
    <EditProfileDialog
        v-model="editDialogVisible"
        :user-info="userInfo"
        @success="handleEditSuccess"
    />

    <!-- 修改密码对话框 -->
    <ChangePasswordDialog
        v-model="passwordDialogVisible"
        @success="handlePasswordSuccess"
    />
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {ElMessage} from 'element-plus'
import {User} from '@element-plus/icons-vue'
import {useUserStore} from '@/store/user'
import {formatDateTime} from '@/utils'
import EditProfileDialog from './EditProfileDialog.vue'
import ChangePasswordDialog from './ChangePasswordDialog.vue'

// Store
const userStore = useUserStore()

// 响应式数据
const userInfo = ref({})
const editDialogVisible = ref(false)
const passwordDialogVisible = ref(false)

// 方法
const loadUserProfile = async () => {
  try {
    await userStore.fetchUserInfo()
    userInfo.value = userStore.userInfo
  } catch (error) {
    console.error('加载用户信息失败:', error)
    ElMessage.error('加载用户信息失败')
  }
}

const getGenderText = (gender) => {
  const genderMap = {
    0: '未知',
    1: '男',
    2: '女'
  }
  return genderMap[gender] || '未知'
}

const handleEditSuccess = () => {
  editDialogVisible.value = false
  loadUserProfile()
  ElMessage.success('个人信息更新成功')
}

const handlePasswordSuccess = () => {
  passwordDialogVisible.value = false
  ElMessage.success('密码修改成功')
}

// 生命周期
onMounted(() => {
  loadUserProfile()
})
</script>

<style scoped>
.profile-page {
  padding: var(--admin-space-lg);
  background: var(--admin-bg-layout);
  min-height: calc(100vh - 60px);
}

.page-header {
  margin-bottom: var(--admin-space-xl);
  padding: var(--admin-space-xl);
  background: linear-gradient(135deg, var(--admin-bg-primary), var(--admin-bg-secondary));
  border-radius: var(--admin-radius-lg);
  box-shadow: var(--admin-shadow-sm);
  border: 1px solid var(--admin-border-light);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--admin-primary), var(--admin-primary-light));
}

.header-content {
  position: relative;
  z-index: 1;
}

.page-title {
  margin: 0 0 var(--admin-space-sm) 0;
  font-size: var(--admin-font-xxl);
  font-weight: var(--admin-font-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-space-sm);
  color: var(--admin-text-primary);
}

.title-icon {
  font-size: var(--admin-font-xxl);
  color: var(--admin-primary);
}

.page-subtitle {
  margin: 0;
  font-size: var(--admin-font-md);
  color: var(--admin-text-secondary);
  font-weight: var(--admin-font-medium);
}

.profile-content {
  max-width: 1200px;
  margin: 0 auto;
}

.profile-content :deep(.el-card) {
  border-radius: var(--admin-radius-lg);
  border: 1px solid var(--admin-border-light);
  box-shadow: var(--admin-shadow-sm);
  transition: all 0.3s ease;
}

.profile-content :deep(.el-card:hover) {
  box-shadow: var(--admin-shadow-md);
  transform: translateY(-2px);
}

.profile-content :deep(.el-card__header) {
  background: var(--admin-bg-secondary);
  border-bottom: 1px solid var(--admin-border-light);
  padding: var(--admin-space-lg);
}

.profile-content :deep(.el-card__body) {
  padding: var(--admin-space-xl);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: var(--admin-font-semibold);
  color: var(--admin-text-primary);
}

.profile-info {
  padding: var(--admin-space-md) 0;
}

.info-item {
  display: flex;
  margin-bottom: var(--admin-space-lg);
  align-items: center;
  padding: var(--admin-space-sm) 0;
  border-bottom: 1px solid var(--admin-border-light);
}

.info-item:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

.label {
  width: 120px;
  color: var(--admin-text-secondary);
  font-size: var(--admin-font-sm);
  font-weight: var(--admin-font-medium);
  flex-shrink: 0;
}

.value {
  flex: 1;
  color: var(--admin-text-primary);
  font-size: var(--admin-font-sm);
  font-weight: var(--admin-font-medium);
}

.avatar-section {
  text-align: center;
  padding: var(--admin-space-lg) 0;
}

.avatar-container {
  margin-bottom: var(--admin-space-lg);
  position: relative;
  display: inline-block;
}

.avatar {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--admin-border-light);
  box-shadow: var(--admin-shadow-md);
  transition: all 0.3s ease;
}

.avatar:hover {
  border-color: var(--admin-primary);
  box-shadow: var(--admin-shadow-lg);
}

.security-actions {
  padding: var(--admin-space-lg) 0;
  text-align: center;
}

.security-actions .el-button {
  min-width: 140px;
  height: var(--admin-height-lg);
  font-weight: var(--admin-font-medium);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-content .el-col {
    margin-bottom: var(--admin-space-lg);
  }

  .info-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--admin-space-xs);
  }

  .label {
    width: auto;
  }

  .avatar {
    width: 100px;
    height: 100px;
  }
}
</style>
